<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--<el-form>
          <el-form-item label="创建人id列表:">
            <el-select placeholder="创建人id列表">
              <el-option v-for="(item,index) in create" :key="index" :label="item.createor" :value="item.createor"></el-option>
            </el-select>
          </el-form-item>
        </el-form>-->
      <el-tab-pane label="全部题目" name="first">
        <div
          v-for="(item,index) in queryMatterList"
          :key="index"
          class="app-container"
          style="border: 1px solid rgb(220, 223, 230);border-radius: 10px;width: 1000px;margin-bottom: 20px"
        >
          <div>
            <h1>{{ item.id }}</h1>
            <h1>创作人:{{ item.createor }}</h1>
            <h1>题目:</h1>
            <h2 v-if="item.matter_type==2">题目类型:填空题</h2>
            <h2 v-if="item.matter_type==0">题目类型:复合题</h2>
            <h2 v-if="item.matter_type==3">题目类型:简答题</h2>
            <div v-html="item.main.matter" />
            <div v-for="ite in item.matter.length" :key="ite">
              <div v-if="item.matter.length!=0">
                <div v-html="item.matter[ite-1].main.matter" />
              </div>
              <div v-if="item.matter.length==0" />
            </div>
            <h1>解析:</h1>
            <div v-html="item.main.analysis" />
            <h1>答案:</h1>
            <div v-for="items in item.answer.length" :key="items">
              <div v-if="item.answer.length!=0">
                <h2 style="color: red;font-weight: bold" v-html="item.answer[items-1].answer" />
              </div>
            </div>
            <h2 v-if="item.answer.length==0" style="color: red;font-weight: bold">空</h2>
            <div v-for="ite2 in item.matter.length" :key="ite2">
              <div v-if="item.matter[ite2-1].answer.length!=0">
                <h2 v-for="it in item.matter[ite2-1].answer.length" :key="it" style="color: red;font-weight: bold">
                  {{ item.matter[ite2-1].answer[it-1].answer }}
                </h2>
              </div>
              <h2 v-if="item.matter[ite2-1].answer.length==0" style="color: red;font-weight: bold">空</h2>
            </div>
            <!--<div v-if="item.answer[0].answer!=null?item.answer[0].answer:1" style="margin-bottom: 20px"></div>-->
            <!--<div v-html="item.answer[index].answer" style="margin-bottom: 20px"></div>-->
            <el-button type="success" style="margin-left: 16px;" @click="editAdopt(item)">通过</el-button>
            <el-button type="danger" style="margin-left: 16px;" @click="queryNoaudit(item)">退回</el-button>
          </div>
        </div>
        <div class="block">
          <span class="demonstration" />
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[2]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="选择题" name="second">
        <div
          v-for="(item,index) in queryMatterList"
          :key="index"
          class="app-container"
          style="border: 1px solid rgb(220, 223, 230);border-radius: 10px;width: 1000px;margin-bottom: 20px"
        >
          <div>
            <h1>编号:{{ item.id }}</h1>
            <h1>题目:</h1>
            <div v-if="item.main.matter" />
            <h1>解析:</h1>
            <div v-html="item.main.analysis" />
            <h1>答案:</h1>
            <div v-html="item.answer.answer" />
            <el-button type="primary" style="margin-left: 16px;" @click="updateChose(item)">修改题目</el-button>
          </div>
        </div>
        <div class="block">
          <span class="demonstration" />
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[2]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <!--<el-tab-pane label="填空题" name="third">填空题</el-tab-pane>
        <el-tab-pane label="简答题" name="fourth">简答题</el-tab-pane>-->
    </el-tabs>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
import {
    queryMatter,
    editAdopt,
    querycreateor,
    queryNoaudit,
    queryChose
    // updateChose
} from '@/api/studentRecruit.js'
export default {
    name: 'Index',
    data() {
        return {
            total: 0,
            page: 1,
            limit: 10,
            currentPage: 1,
            activeName: 'first',
            create: null,
            clickData: null,
            createorId: null,
            queId: null,
            matters: null,
            drawer: false,
            queryMatterList: null,
            queryMatterCreateor: null,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        }
    },
    created() {
        // 分页查询修复系统
        this.queryMatter()
        this.querycreateor()
        this.queryChose()
    },
    methods: {
        // 修改题目
        async handleClick(e) {

        },
        handleSizeChange(val) {
            this.limit = val
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            this.page = val
            this.queryMatter()
            console.log(`当前页: ${val}`)
        },
        // 分页查询修复系统
        async queryMatter() {
            let queryData = {
                page: this.page,
                limit: 2
            }
            let resData = await queryMatter(queryData)
            this.queryMatterList = resData.data.list.data
            this.createorId = resData.data.list.data[0].createor
            console.log('获取创建人id:', this.createorId)
            this.queryMatterCreateor = resData.data.createor
            console.log('分页查询修复系统list', this.queryMatterList)
            this.total = resData.data.list.total
            console.log('分页查询修复系统createor', this.queryMatterCreateor)
        },
        // 通过按钮
        async editAdopt(e) {
            let updateData = {
                id: e.id
            }
            let resData = await editAdopt(updateData)
            console.log(resData)
            console.log('通过:', e.id)
            this.$message.success('通过成功！')
            this.queryMatter()
        },
        // 获取所有创建人
        async querycreateor() {
            let querycre = {

            }
            let createorData = await querycreateor(querycre)
            this.create = createorData.data
            console.log('查询的创建人:', this.create)
        },
        // 退回题目
        async queryNoaudit(e) {
            console.log('问题id:', e.main.id)
            let updateData = {
                id: e.main.id
            }
            let resData = await queryNoaudit(updateData)
            this.$message.error('退回成功!')
            console.log('退回题目', resData)
        },
        // 分页查询选择题
        async queryChose() {
            let queryData = {
                page: 1,
                limit: 10
            }
            let resData = await queryChose(queryData)
            console.log('分页查询选择题:', resData)
        },
        // 修改题目
        async updateChose(e) {
            this.drawer = true
            this.clickData = e
            this.matters = e.main.matter
            console.log(e)
            console.log(e.target)
        /* let updateData = {

          }
          let resData = await updateChose(updateData)
          console.log('修改题目:',resData)*/
        }
    }
}
</script>

<style scoped>

</style>
